<template>
  <view>
    <view class="cart-bot-action">
      <view class="action-content">
        <view class="check-n-p">
          <wd-checkbox
            v-model="value"
            checked-color="#f40"
            @change="emit('checkAll', value)"
          >
            全选
          </wd-checkbox>
          <view class="num-price">
            共 2 件商品，合计<text class="price"> 149.00 </text>元
          </view>
        </view>
        <wd-button type="error" size="small" @tap="emit('goPay')">
          立即购买
        </wd-button>
      </view>
    </view>
    <view class="cart-placeholder"></view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const value = ref(false);
const props = defineProps();
const emit = defineEmits(["goPay", "checkAll"]);
</script>

<style lang="scss" scoped>
.cart-bot-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  // padding-bottom: calc(env(safe-area-inset-bottom) + 60px) !important;
  // padding-bottom: calc(constant(safe-area-inset-bottom) + 60px) !important;
  height: calc(constant(safe-area-inset-bottom) + 110px) !important;
  height: calc(env(safe-area-inset-bottom) + 110px) !important;
  .action-content {
    padding: 10px 1rem;
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .check-n-p {
      flex: 1;
      gap: 10px;
      display: flex;
      align-items: center;
      .num-price {
        color: #999;
        font-size: 12px;
        .price {
          color: #f40;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }
}
.cart-placeholder {
  height: 50px;
}
</style>
